<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Batalla Naval</title>
		
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="js/battle.js"></script>
		
		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic' rel='stylesheet' type='text/css'>
		<link href="css/battle.css" media="all" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="title"><span id="me">Jugador 1</span><span id="other">Jugador 2</span></div>
		<canvas id="tablero"></canvas>
		<div class="rightPanel">
	        <div class="userInfo">
	            <span class="disconnected" id="status">Desconectado</span>
	            Nombre: <input type="text" id="userName"/><span class="onLineUserName"></span>
	            <button id="connect" onclick="wsclient.connect(document.getElementById('userName').value);">Conectar</button>
	            <button id="disconnect" disabled="disabled" onclick="wsclient.disconnect();">Desconexión</button>
	        </div>
	        <div id="onLineUsersPanel">
	            <h3>Usuarios conectados:</h3>
	            <ul id="onlineUsers">
	
	            </ul>
	        </div>
	    </div>
	</body>
</html>